<template>
  <jxtech-dictionary-select
    style="width: 100%"
    :size="size"
    v-model:value="modelValue"
    :placeholder="placeholder"
    :code-item-id="codeItemId"
    :disabled="disabled"
    :clearable="clearable"
    :load-data="JxtechDictionarySelectExtState.onLoadData"
    @change-value="JxtechDictionarySelectExtState.dictionarySelectChange"
  ></jxtech-dictionary-select>
</template>

<script setup lang="ts" name="JxtechDictionarySelectExt">
import { reactive, ref, watch } from "vue";
import { JxtechDictionarySelect } from "@whjxtech/jxtech-component";
import { SelectOptionDataType, SelectOptionKeyType } from "@whjxtech/jxtech-component";
import { commonList } from "@/api/modules/org/code-list";

interface JxtechDictionarySelectExtProps {
  /**组件大小 */
  size?: string;
  /**绑定值 */
  value?: string | any[];
  /**提示文字 */
  placeholder?: string;
  /**数据字典类型id */
  codeItemId: string;
  /**是否禁用 */
  disabled?: boolean;
  /**是否可清理 */
  clearable?: boolean;
}

const emit = defineEmits<{
  (e: "update:value", value: string | Array<any> | undefined): void;
  (e: "changeValue", value: any): void;
}>();

const props = withDefaults(defineProps<JxtechDictionarySelectExtProps>(), {
  size: "default",
  placeholder: "请选择",
  disabled: false,
  clearable: true
});

const modelValue = ref(props.value);
watch(
  () => modelValue.value,
  val => {
    emit("update:value", val);
  }
);

watch(
  () => props.value,
  val => {
    modelValue.value = val;
  }
);

const JxtechDictionarySelectExtState = reactive({
  selectValueType: {
    labelKey: "value",
    valueKey: "key"
  } as SelectOptionKeyType,
  onLoadData: () => commonList(props.codeItemId),
  dictionarySelectChange: (item: SelectOptionDataType) => {
    emit("changeValue", item);
  }
});
</script>

<style lang="scss" scoped></style>
